<template>
	<view class="container" :class="'theme-'+theme">
		<view class="addTitle">
			<view class="titleDetail">
				 <view class="" style="flex:1;text-align:left">
					<image src="../../static/newh5/fanhui.png"
					class="yticon"
					style="width: 13px;height: 20px;color:black"
					@click="returnIndex()"
					></image>
				</view>
				<view class="titleText" style="flex:1">
					<b>订单评价</b>
				</view>
				<view class="" @click="publishReview()" style="color:#269cd3;flex:1;text-align:right">
					<text>发布</text>
				</view>
			</view>
		</view>
		<view class="supplier-section">
			<view class="name-area">
				<image class="logo" src="../../static/store.png" mode="aspectFill" />
				<view class="s-name">{{orderData.supplierName}}</view>
			</view>
			<view class="s-rate" v-for="(item,index) in rateList" :key="index">
				<view class="tit">{{item}}</view>
				<tui-rate class="rate" :size="22" :current="rates[index]" active="#ffca3e" :hollow="true" @change="onChange($event,'s',index)"></tui-rate>
				<!-- <uni-rate size="19" class="rate" :margin="5" v-model="rates[index]" activeColor="#ffca3e" @change="onChange($event,'s',index)"></uni-rate> -->
			</view>
		</view>
		<view class="goods-section">
			<view class="good-item" v-for="(item,index) in orderData.items">
				<view class="good-info">
					<image class="image-wrapper" :src="item.thumbnail" mode="aspectFit" />
					<view class="item-right">
						<view class="title more-t">{{item.productName}}</view>
						<view class="price">￥{{item.price|money}}</view>
					</view>
				</view>
				<view class="g-rate">
					<view class="tit">商品评分</view>
					<tui-rate class="rate" :size="22" :current="scores[index]" active="#ffca3e" :hollow="true" @change="onChange($event,'g',index)"></tui-rate>
					<!-- <uni-rate size="19" :margin="5" class="rate" v-model:value="scores[index]" activeColor="#ffca3e" @change="onChange($event,'g',index)"></uni-rate> -->
				</view>
				<textarea v-model="contents[index]" placeholder-class="ph" placeholder="分享心得,给万千想买的人一个参考" class="content"></textarea>
<!--        <u-form-item label-position="top" :label="noteList[item.id]" label-width="150">
          <u-upload
              width="160" height="160"
              :action="uploadPath"
              :max-size="maxSize"
              :max-count="maxCount"
              :source-type="sourceType"
              @on-uploaded="onUploadSuccess($event,item)"
              @on-remove="onUploadSuccess($event,item)"
              :show-progress="true"
              :header="headers"/>
        </u-form-item> -->
			</view>
		</view>
	</view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
	import {
		getBySn,
		addReview
	} from '../../api/order/order.js'
  import {
    baseURL,
    serv
  } from '../../common/utils/config.js'
	import tuiRate from '../../components/tui-rate.vue'
	export default {
		components: {
			tuiRate
		},
		data() {
			return {
        uploadPath: baseURL + serv.fsdsrest + '/api/fdfs/file/upload',
        headers: {
          Authorization: 'Bearer ' + uni.getStorageSync('token')
        },
        noteList: {},
        currUploadItemId:'',
        currProductFiles:{},
        maxSize:10*1024*1024,
        maxCount:6,
        sourceType:['album', 'camera'],
				orderData: {},
				rates: [5, 5, 5, 5],
				rateList: [
					'服务态度',
					'商品质量',
					'商品价格',
					'物流服务'
				],
				scores: [],
				contents: [],
			};
		},
		onLoad(option) {

			this.loadData(option.sn)
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.publishReview()
			}
		},
		// #endif
		methods: {
			returnIndex() {
				goback()
			},
      onUploadSuccess(file,item){
        this.currUploadItemId = item.id
        let newFileList = [];
        file.forEach(item=>{
          let fileData = {}
          fileData.id = item.response.data.storageFileId
          fileData.fileUrl = item.response.data.fileUrl
          fileData.fileName = item.response.data.fileName
          newFileList.push(fileData)
        })
        this.$set(this.currProductFiles,this.currUploadItemId,newFileList)
        this.$set(this.noteList,this.currUploadItemId,'您共上传了'+file.length+'张，还可以上传'+(6-file.length).toString()+'张')

      },
			loadData(sn) {
				const params = {
					sn: sn
				}
				getBySn(params).then(res => {
					if (res.code === 0) {
						this.orderData = res.data;
						for (let i = 0; i < this.orderData.items.length; i++) {
              this.$set(this.noteList,this.orderData.items[i].id,'您共上传了0张，还可以上传6张')
							this.scores.push(5)
							this.contents.push('非常好')
						}
					}
				})
			},
			onChange(e, type, index) {
				if (type === 's') {
					this.rate = e.index
					this.rates[index] = e.index;
				} else {
					this.scores[index] = e.index;
				}
			},
			publishReview() {
				let reviewItems = []
				let flag = false
				for(let index = 0;index < this.orderData.items.length;index++){
					const item = this.orderData.items[index]
					let reviewItem = {};
					reviewItem.orderItemId = item.id;
					reviewItem.productId = item.productId;
					reviewItem.productName = item.productName;
					reviewItem.productThumbnail = item.thumbnail;
					reviewItem.productPrice = item.price;
					reviewItem.bigProductId = item.bigProductId;
					if (this.contents[index] === '') {
						this.$util.msg('商品评价不能为空!')
						flag = true
						break;
					}
					reviewItem.content = this.contents[index];
					reviewItem.score = this.scores[index];
					reviewItem.files = this.currProductFiles[item.id]
					reviewItems.push(reviewItem);
				}
				if(flag) return
				const params = {
					username: uni.getStorageSync('userInfo').userName,
					orderId: this.orderData.id,
					supplierId: this.orderData.supplierId,
					supplierName: this.orderData.supplierName,
					serviceScore: this.rates[0],
					qualityScore: this.rates[1],
					priceScore: this.rates[2],
					logisticsScore: this.rates[3],
					sn: this.orderData.sn,
					thirdSn: this.orderData.thirdSn,
					items: reviewItems
				}
				console.log(params)
				debugger
				addReview(params).then(res => {
					if (res.code === 0) {
						this.$util.msg('评价成功')
						setTimeout(() => {
							getApp().globalData.evaluateRefresh = 1
							uni.navigateBack()
						}, 700)
					} else {
						this.$util.msg(res.message)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		background: #f5f5f5;
	}

	.supplier-section {
		margin: 20rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;

		.name-area {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.logo {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}

			.s-name {
				font-size: 15px;
			}
		}

		.s-rate {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.tit {
				font-size: 14px;
				// font-weight: bold;
			}

			.rate {
				margin-left: 20rpx;
			}
		}
	}

	.goods-section {
		margin: 20rpx;
		display: flex;
		flex-direction: column;

		.good-item {
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			.good-info {
				display: flex;
				margin-bottom: 20rpx;

				.image-wrapper {
					width: 80px;
					height: 80px;
					flex-shrink: 0;
					background-color: #fff;
					border-radius: 8upx;
				}

				.item-right {
					display: flex;
					flex-direction: column;
					flex: 1;
					overflow: hidden;
					justify-content: space-between;
					position: relative;
					padding: 12rpx 20upx;

					.title {
						width: 100%;
						color: $font-color-dark;
						font-size: $font-base;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
					}

					/*多行文本溢出省略号*/
					.more-t {
						overflow: hidden; // 超出的文本隐藏
						text-overflow: ellipsis; // 溢出用省略号显示
						display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
						-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
						-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						transition: all linear 0.2s;
					}

					.price {
						font-size: $font-base + 2upx;
						color: $uni-color-primary;
						height: 40upx;
						line-height: 40upx;
					}

				}
			}

			.g-rate {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.tit {
					font-size: 14px;
				}

				.rate {
					margin-left: 20rpx;
				}
			}

			.content {
				background: #fcfcfc;
				height: fit-content;
				min-height: 140rpx;
				width: 100%;
				border-radius: 10rpx;
				padding: 16rpx;
				color: #303133;
				font-size: 14px;
				border: 1px solid #d9d9d9;
			}

			.ph {
				font-size: 14px;
				color: #666;
			}
		}
	}
</style>
